<template>
  <div>
    <template v-for="item in prop.menuList" :key="item.path">
      <!--      分为两种方式渲染：有子菜单和没有子菜单-->
      <el-sub-menu
          :index="item.path"
          v-if="item.nodeType === 1"
          class="child-item"
      >
        <template #title>
          <div>
            <el-icon v-show="item.iconId!=null">
              <el-image :src="$imgBaseUrl+item.iconId" alt="" class="icon_class">
                <template #error>
                  <div></div>
                </template>
              </el-image>
            </el-icon>
            <span>{{ item.name }}</span>
          </div>
        </template>
        <!--        有子菜单的继续遍历（递归）-->
        <MenuTree :menuList="item.children"></MenuTree>
      </el-sub-menu>
      <!--      没有子菜单-->
      <el-menu-item :index="item.path" v-if="item.nodeType===2" @click="clickOnMenu(item)">
        <el-icon v-show="item.iconId!=null">
          <el-image :src="$imgBaseUrl+item.iconId" alt="" class="icon_class">
            <template #error>
              <div></div>
            </template>
          </el-image>
        </el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script setup>
import {useMenusStore} from "@/store/permission";
// eslint-disable-next-line no-undef
let prop = defineProps(['menuList'])
let store = useMenusStore()

function clickOnMenu(node) {
  let hasNode = store.tabsList.filter(item => item.id === node.id)
  if (hasNode.length === 0) {
    store.setTabs(node)
  }
  store.setActive(node.path)
}
</script>

<style scoped>
.icon_class {
  width: 20px;
  height: 20px;
}

.child-item .el-menu-item {
  background-color: #1F2D3D !important;
}

.child-item .el-menu-item:hover {
  background-color: #001528 !important;
}

.child-item .el-submenu__title {
  background-color: #1F2D3D !important;
}

.child-item .el-submenu__title:hover {
  background-color: #001528 !important;
}
</style>
